import { FC } from "react";
import { MyInfo } from "../../indexdb";

//#region component Types
export interface MsgProps {
  data: any;
}
//#endregion component Types

const formatDate = (timestamp: number) => {
  // dateNumber -> 2021-08-31 10:00
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours().toString().padStart(2, "0");
  const minute = date.getMinutes().toString().padStart(2, "0");
  return `${year}/${month}/${day} ${hour}:${minute}`;
};

//#region component
export const Msg: FC<MsgProps> = (props) => {
  const { data } = props;
  const isMy = data.sender === MyInfo.id;
  return (
    <div
      style={{
        padding: "8px 16px",
        margin: "5px",
        borderRadius: "5px",
        backgroundColor: isMy ? "#2e8dffe6" : "#f0f0f0e6",
        color: isMy ? "#fff" : "#000",
        textAlign: "left",
        wordBreak: "break-all",
        maxWidth: "60%",
        marginLeft: isMy ? "auto" : "0", // 修改此行
        marginRight: isMy ? "0" : "auto", // 修改此行
      }}
    >
      <div>
        id:{" "}
        <span
          style={{
            color: "#a50000",
          }}
        >
          {data.id}
        </span>
      </div>
      <div>{data.content.text}</div>
      <div style={{ textAlign: "right" }}>
        <small>{formatDate(data.timestamp)}</small>
      </div>
    </div>
  );
};
//#endregion component
